import Text from 'ol/style/Text';
import Icon from 'ol/style/Icon';
import Fill from 'ol/style/Fill';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Stroke from 'ol/style/Stroke';

/**
 * 设置一个点的样式
 */
const image = new Circle({
    radius: 5,
    fill: new Fill({
        color: '#009f95'
    })
});

/**
 * 做一个全量的样式
 */
const styles = {
    Point: new Style({
        image: image
    }),
    LineString: new Style({
        stroke: new Stroke({
            color: 'green',
            width: 4
        })
    }),
    MultiLineString: new Style({
        stroke: new Stroke({
            color: 'green',
            width: 4
        })
    }),
    MultiPoint: new Style({
        image: image
    }),
    MultiPolygon: new Style({
        stroke: new Stroke({
            color: 'yellow',
            width: 1
        }),
        fill: new Fill({
            color: 'rgba(255, 255, 0, 0.1)'
        })
    }),
    Polygon: new Style({
        stroke: new Stroke({
            color: 'blue',
            width: 1
        }),
        fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    }),
    GeometryCollection: new Style({
        stroke: new Stroke({
            color: 'magenta',
            width: 2
        }),
        fill: new Fill({
            color: 'magenta'
        }),
        image: new Circle({
            radius: 10,
            fill: null,
            stroke: new Stroke({
                color: 'magenta'
            })
        })
    }),
    Circle: new Style({
        stroke: new Stroke({
            color: 'red',
            width: 2
        }),
        fill: new Fill({
            color: 'rgba(255,0,0,0.2)'
        })
    })
};

/**
 * 全局默认样式
 *
 *
 * 多数情况下，地图元素会存在少许差异，
 * 以点为例，福建、北京，至少名字是不同的，需要根据配置进行微调
 *
 * 实际生产中， style 大都是按照这种方式实现的，很少会将所有元素指定为同一种样式
 *
 * @param feature 包含图形的全部信息
 * @returns {*}
 */
const defaultStyle = (feature) => {
    return styles[feature.getGeometry().getType()];
}


/**
 * 带圈数字
 *
 * 外面是个圈，里面是个数字
 *
 * @param feature
 * @returns {Style}
 */
const pointCircleNumber = function (feature) {
    return new Style({
        //背景图标
        image: new Circle({
            radius: 15,
            fill: new Fill({
                color: '#009f95'
            })
        }),
        //文本样式
        text: new Text({
            text: '1',
            textAlign: "center",
            color: '#FFF',
            font: 'bold 24px serif',
            fill: new Fill({
                color: '#FFF'
            })
        })
    })
}

export default {defaultStyle}